<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-09-15 15:16:42
-->
<template>
  <div class="content-container">
    <el-row type="flex" justify="space-between" class="header-filter four-border-blueBg">
      <div class="row-left">
        <TextInput v-model="listParams.routeName" class="item" clearable :placeholder="$t('travelAgency.routeName')" />
        <el-select v-model="listParams.status" class="item" :placeholder="$t('public.status')" clearable>
          <el-option v-for="item in g_options.tourDateStatusOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
        <DateTime v-model="listParams.startTime" class="item" style="min-width: 190px; max-width: 190px" clearable
          :placeholder="$t('travelAgency.departureDate')" />
        <TextInput v-model="listParams.createUser" class="item" clearable
          :placeholder="$t('travelAgency.groupCreator')" />
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
          }}</el-button>
        <el-button plain @click="handleReset">{{
          $t('public.reset')
          }}</el-button>
      </div>
      <div class="row-right">
        <el-button type="primary" @click="handleCreate">+ {{ $t('public.create') }}</el-button>
      </div>
    </el-row>
    <div class="base-table-container">
      <BaseTable ref="refContentTable" v-loading="loading" :data="tableData" row-key="id">
        <TableColumn prop="status" :label="$t('public.status')" :column-width="columnWidthObj.status">
          <template #default="{ row }">
            <span class="dot-status" :class="
                g_options.getOptionText(
                  g_options.tourDateStatusOptions,
                  row.status,
                  '--',
                  'class'
                )
              ">{{
              g_options.getOptionText(
              g_options.tourDateStatusOptions,
              row.status,
              '--'
              )
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="startTime" :label="$t('travelAgency.departureDate')"
          :column-width="columnWidthObj.startTime">
          <template #default="{ row }">
            <span>{{
              row.startTime
              ? g_dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss')
              : '--'
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="weekday" :label="$t('travelAgency.weekday')" :column-width="columnWidthObj.weekday">
          <template #default="{ row }">
            <span>{{
              row.startTime
              ? g_options.getOptionText(
              g_options.dateDayOptions,
              g_dayjs(row.startTime).day(),
              '--'
              )
              : '--'
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="type" :label="$t('travelAgency.type')" s :column-width="columnWidthObj.type">
          <template #default="{ row }">
            <span>{{
              g_options.getOptionText(
              g_options.groupPeriodTypeOptions,
              row.type,
              '--'
              )
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="code" :label="$t('travelAgency.groupNumber')" :column-width="columnWidthObj.code" />
        <TableColumn prop="routeName" :label="$t('travelAgency.routeName')" :column-width="columnWidthObj.routeName" />
        <!-- <TableColumn
          prop="customerName"
          :label="$t('hotel.customer')"
          :column-width="columnWidthObj.customerName"
        /> -->
        <TableColumn prop="peopleCountPlan" :label="$t('travelAgency.plannedNumber')"
          :column-width="columnWidthObj.peopleCountPlan" />
        <TableColumn prop="peopleCountReal" :label="$t('travelAgency.currentNumber')"
          :column-width="columnWidthObj.peopleCountReal" />
        <TableColumn prop="remainingSeats" :label="$t('travelAgency.remainingSeats')"
          :column-width="columnWidthObj.remainingSeats">
          <template #default="{ row }">
            <span>{{ row.peopleCountPlan - row.peopleCountReal }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="createUser" :label="$t('travelAgency.groupCreator')"
          :column-width="columnWidthObj.createUser" />
        <TableColumn prop="action" fixed="right" :label="$t('public.action')" max-width="220"
          :column-width="columnWidthObj.action">
          <template #default="{ row }">
            <el-button text @click="handleDetailDialog(row, 'view')">
              {{ $t('public.detail') }}
            </el-button>
            <el-button text :disabled="row.status + '' === '3'" @click="handleDetailDialog(row, 'confirm')">
              {{ $t('travelAgency.groupPeriodConfirm') }}
            </el-button>
            <el-button text :disabled="row.status + '' === '4'" @click="handleCancelDialog(row)">
              {{ $t('public.cancel') }}
            </el-button>
            <el-button text @click="handleEditDialog(row)">
              {{ $t('public.edit') }}
            </el-button>
            <el-button text @click="handleDelete(row)">
              {{ $t('public.delete') }}
            </el-button>
            <el-button text @click="handleRoute(row)">线路</el-button>
            <el-button text @click="handleCost(row)">成本</el-button>
            <el-button text @click="handleOrderBill(row)">订单账单</el-button>
            <el-button text @click="handleQuote(row)">报价</el-button>
            <!-- <el-button text @click="handleOperatorDialog(row)">
              {{ $t('travelAgency.operator') }}
            </el-button> -->
          </template>
        </TableColumn>
      </BaseTable>
      <BasePagination v-model:page-size="pageSize" v-model:current-page="pageNum" :total="total"
        @change="getTableList()" />
    </div>
    <!-- 新建/编辑 -->
    <AddOrEditDialog v-if="addOrEditVisible" :id="rowId" v-model="addOrEditVisible" :type="addOrEditType"
      @update="handleQuery" />
    <!-- 详情 -->
    <DetailDialog v-if="detailVisible" :id="rowId" v-model="detailVisible" :type="detailType" @update="handleQuery" />
    <!-- 计调 -->
    <!-- <OperatorDialog
      v-if="operatorVisible"
      :id="rowId"
      v-model="operatorVisible"
      @update="handleQuery"
    /> -->
    <!-- 线路详情 -->
    <RouteDetailDialog v-if="routeDetailDialogVisible" v-model="routeDetailDialogVisible" :id="rowRouteId"
      @update="handleQuery" />
    <!-- 成本详情 -->
    <CostDialog v-if="costDialogVisible" v-model="costDialogVisible" :id="rowId" @update="handleQuery" />
    <!-- 订单账单 -->
    <OrderBillDialog v-if="orderBillDialogVisible" v-model="orderBillDialogVisible" :id="rowId" @update="handleQuery" />
  </div>
</template>

<script setup>
import AddOrEditDialog from './component/AddOrEditDialog.vue'
import DetailDialog from './component/DetailDialog.vue'
// import OperatorDialog from './component/OperatorDialog.vue'
import RouteDetailDialog from '@/views/travelAgency/route/component/DetailDialog.vue'
import CostDialog from './component/CostDialog.vue'
import OrderBillDialog from './component/OrderBillDialog.vue'

const listParams = ref({
  routeName: '',
  status: '',
  startTime: '',
  createUser: ''
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
// 弹框参数
const addOrEditVisible = ref(false)
const addOrEditType = ref('add')
const rowId = ref('')
const rowRouteId = ref('')
const detailVisible = ref(false)
const detailType = ref('view')
// const operatorVisible = ref(false)
const routeDetailDialogVisible = ref(false)
const costDialogVisible = ref(false)
const orderBillDialogVisible = ref(false)

onMounted(() => {
  getTableList()
})

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiTeamList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...listParams.value
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

const handleReset = () => {
  Object.assign(listParams.value, {
    routeName: '',
    status: '',
    startTime: '',
    createUser: ''
  })
  handleQuery()
}

const handleCreate = () => {
  addOrEditVisible.value = true
  addOrEditType.value = 'add'
}

const handleQuote = row => {
  g_router.push({
    path: '/travelAgency/quote',
    query: { teamId: row.id }
  })
}

const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiTeamDelete({
          id: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => { })
}

const handleDetailDialog = (row, type) => {
  detailVisible.value = true
  detailType.value = type
  rowId.value = row.id
}

const handleCancelDialog = row => {
  ElMessageBox.confirm(
    g_t(`travelAgency.confirmCancelTeam`, {
      id: row.code
    }),
    g_t('public.tip'),
    {
      confirmButtonText: g_t('public.confirm'),
      cancelButtonText: g_t('public.cancel'),
      type: 'warning'
    }
  )
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiTeamUpdateStatus({
          id: row.id,
          status: 4
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => { })
}

const handleEditDialog = row => {
  addOrEditVisible.value = true
  addOrEditType.value = 'edit'
  rowId.value = row.id
}

const handleRoute = row => {
  routeDetailDialogVisible.value = true
  rowId.value = row.id
  rowRouteId.value = row.routeId
}

const handleCost = row => {
  costDialogVisible.value = true
  rowId.value = row.id
}

const handleOrderBill = row => {
  orderBillDialogVisible.value = true
  rowId.value = row.id
}

// const handleOperatorDialog = row => {
//   operatorVisible.value = true
//   rowId.value = row.id
// }
</script>

<style lang="scss" scoped></style>
